@import "parts/global.scss";
@import "parts/layout.scss";
@import "topbar.scss";


.topbar {
   .menu-toggles {
      display: none;
      @media screen and (max-width: $content-area-max-width) {
         display: flex;
      }
      flex-grow: 1;
      justify-content: flex-end;
      a {
         cursor: pointer;
      }
   }
   .menu-toggles a:last-of-type {
      padding-right: $page-pad;
   }
}

article:hover {
   cursor: default;
}

.article-title {
   font-family: $text-font;
   font-size: 3.6rem;
   font-weight: 530;
   padding: 10px 20px;
}

.prev-and-next {
   border-top: solid 1px rgb(230, 230, 230);
   border-bottom: solid 1px rgb(230, 230, 230);

   display: flex;
   justify-content: space-between;

   .arrow {
      font-weight: 900;
      color: black;
      cursor: default;
   }

   .arrow:hover {
      cursor: default;
   }

   .left-arrow {
      margin-right: 20px;
   }

   .right-arrow {
      margin-left: 20px;
   }

   div {
      margin: 10px 20px;
   }

   a {
      text-decoration: none;
      color: rgb(9, 80, 128);
   }
}

article {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;

   // 确保展示最后一部分内容时页脚在页面外，否则页脚会把目录顶上去，只有在确实想看页脚时目录才可以被顶上去
   section:last-of-type {
      min-height: calc(100vh - #{$topbar-height});
   }

   section {
      padding: 10px 20px;
   };

   h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
   };

   h1, h2, h3, h4, h5, h6 {
      margin: 1rem 0rem;
   };

   p, li {
      margin: 0.7rem 0rem;
   };

   ul {
      margin: 0rem;
   }

   img, .img-placeholder {
      max-width: 100%;
      margin: 0.5rem 0rem;
   };

   .img-loaded, .img-placeholder {
      width: auto;
      height: auto;
   }

   h1 {
      font-size: 2.1rem;
   }

   h2 {
      font-size: 1.5rem;
   }

   h3 {
      font-size: 1.3rem;
   }

   h4 {
      font-size: 1.3rem;
   }

   h5 {
      font-size: 1.3rem;
   }

   h6 {
      font-size: 1.3rem;
   }

   p, li {
      font-family: $text-font;
      line-height: 1.9;
   }

   p {
      text-indent: 2em;
   }

   p code , li code {
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      background-color: rgb(239, 239, 239);
      color: #095080;
      padding: 0px 2px;
   }

   .img-container {
      width: 100%;
      text-align: center;
   }

   blockquote {
      margin: 0rem;
      border-left: solid 0.26rem lightgray;
      padding-left: 0.5rem;
      > p {
         text-indent: 0rem;
      };
   };

   a {
      text-decoration: none;
      color: rgb(9, 80, 128);
   };

   .math-block {
      margin: 0rem;
      font-size: 1.5rem;
   };
}

.reader-area {
   display: flex;
   flex-direction: row;
}

.content-area {
   position: relative;
   flex-grow: 1;
   min-width: 0px;
   min-height: calc(100vh - #{$topbar-height});
   $border-color: rgb(230, 230, 230);
   box-shadow: 1px 0px 0px 0px $border-color, -1px 0px 0px 0px $border-color;
}

.switch-menu-rail {
   position: relative;
   top: 0px;
   width: $switch-menu-width;
   min-width: $switch-menu-width;
   height: 100%;
   display: none;
   flex-direction: column-reverse;
   @media screen and (max-width: $article-menu-width + $content-area-max-width) {
      display: flex;
   }
   @media screen and (max-width: $content-area-max-width) {
      display: none;
   }
}

.switch-menu-in-view {
   display: flex;
   flex-direction: column-reverse;
   position: sticky;
   bottom: 0px;
   height: calc(100vh - #{$topbar-height});
   width: 100%;
}

.menu-switcher {
   display: flex;
   width: 100%;
   height: $topbar-height;
   margin: 0px;
   padding: 0px;
   color: #095080;

   li {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0px;
      background-color: rgb(200, 200, 200);
   }

   li[data-active] {
      background-color: rgb(230, 230, 230);
   }

   li:hover {
      cursor: pointer;
   }

   li[data-active]:hover {
      cursor: default;
   }
}

.menu-box {
   flex-grow: 1;
   height: calc(100vh - #{$topbar-height} - #{$topbar-height});

   .menu-content {
      display: none;
   }

   .menu-content[data-active] {
      display: block;
   }
}

.article-menu-rail {
   position: relative;
   top: 0px;
   width: $article-menu-width;
   min-width: $article-menu-width;
   height: 100%;
   display: flex;
   flex-direction: column-reverse;
   @media screen and (max-width: $article-menu-width + $content-area-max-width) {
      display: none;
   }
};

.article-menu-in-view {
   display: flex;
   position: sticky;
   bottom: 0px;
   height: calc(100vh - #{$topbar-height});
   width: 100%;
}

.book-menu-rail {
   position: relative;
   top: 0px;
   width: $book-menu-width;
   min-width: $book-menu-width;
   height: 100%;
   display: flex;
   flex-direction: column-reverse;
   @media screen and (max-width: $article-menu-width + $content-area-max-width) {
      display: none;
   }
};

// 目录在屏幕中显示的部分，控制目录的高度和水平位置
.book-menu-in-view {
   display: flex;
   position: sticky;
   bottom: 0px;
   width: 100%;
   height: calc(100vh - #{$topbar-height});
};

.menu-content {
   font-family: $text-font;
   height: 100%;
   width: 100%;
   overflow-y: auto;

   ul {
      list-style-type: none;
      padding-left: 1rem;
      margin: 0rem;

      li {
         padding: 0rem;
         margin: 0.7rem 0px;
         a, .menu-mid-level {
            display: inline-block;
            text-decoration: none;
         }
         a {
            color: rgb(9, 80, 128);
         }
         a:hover {
            text-decoration: underline;
         }
         .menu-mid-level:hover {
            cursor: default;
         }
      }
   }

   >ul {
      margin: 1.5rem;
      padding: 0rem;
   };

};

.article-menu-width {
   width: $article-menu-width;
   min-width: $article-menu-width;
   max-width: $article-menu-width;
}

.book-menu-width {
   width: $book-menu-width;
   min-width: $book-menu-width;
   max-width: $book-menu-width;
}

.menu-layer {
   display: none;
   z-index: 10;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.menu-layer[data-active] {
   @media screen and (max-width: $content-area-max-width) {
      display: flex;
      flex-direction: column-reverse;
   }
}

.menu-layer-menu {
   display: none;
   background-color: rgb(200, 200, 200);
}

.menu-layer-menu[data-active] {
   @media screen and (max-width: $content-area-max-width) {
      display: block;
   }
}

.menu-layer-in-view {
   display: flex;
   position: sticky;
   bottom: 0px;
   width: 100%;
   height: calc(100vh - #{$topbar-height});
}

.menu-layer-mask {
   height: 100%;
   flex-grow: 1;
   background-color: rgba(230, 230, 230, 0.5)
}


